<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>SEED</title>

    <script src="title.js"></script>
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/vue/2.4.2/vue.js"></script>
    <script src="lib/vue/vue-router.js"></script>
    <script src="lib/elementui/1.4.2/index.js"></script>
    <link rel="stylesheet" href="lib/elementui/1.4.2/theme-default/index.css">
    <link rel="stylesheet" href="lib/awesome/css/font-awesome.min.css">


</head>

<style type="text/css">

    body {
        background: url("image/login_background.jpg") no-repeat;
        background-size: cover;
        max-height: 100%;
        max-width: 100%;
    }

    .login-box {
        width: 295px;
        height: 300px;
        padding: 43px 14px 15px;
        top: 25%;
        left: 55%;
        right: 30%;
        text-align: left;
        position: absolute;
        z-index: 2;
        border-left: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
        border-top: 2px solid #f40;
        background-color: #fafafa;
    }

    .login-input {
        margin-top: 20px;
    }

    .login-btn {
        width: 100%;
        background: #f40;
        border-color: #f40;
        font-size: 16px;
        font-weight: 700;
        font-family: "PingFang SC";
    }

    .login-form {
        /*padding-top: 40px;*/
    }

    .login-infp {
        color: #f40;
    }

    .login-errorInfo {
        color: #f40;
        text-align: center;
    }
</style>

<body>
<div class="login-box">
    <el-form class="login-form" :model="ruleForm" :rules="rules" ref="ruleForm" action="signIn"
             method="post">
        <el-form-item prop="username">
            <el-input placeholder="请输入账号"
                      v-model="ruleForm.username"
                      name="username"
                      autofocus="autofocus"
                      @keyup.enter.native="login">
                <template slot="prepend"><i class="fa fa-user-o" style="width: 12px"></i></template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input placeholder="请输入密码"
                      type="password"
                      v-model="ruleForm.password"
                      name="password"
                      @keyup.enter.native="login">
                <template slot="prepend"><i class="fa fa-key" style="width: 12px"></i></template>
            </el-input>
        </el-form-item>
        <el-form-item prop="verifyCode">
            <el-col :span="14">
                <el-input ref="verifyCode"
                          placeholder="请输入验证码"
                          v-model="ruleForm.verifyCode"
                          name="verifyCode"
                          @keyup.enter.native="login">
                    <template slot="prepend"><i class="fa fa-keyboard-o" style="width: 12px"></i></template>
                </el-input>
            </el-col>
            <el-col :span="8">
                <img :src="captchaUrl" @click="captchaRefresh"
                     style="width: 100px;height: 35px;margin-left: 22px; cursor: pointer">
            </el-col>
        </el-form-item>
        <el-form-item>
            <div class="login-input">
                <el-button class="login-btn" type="primary" @click="login">
                    登&nbsp;&nbsp;录
                </el-button>
            </div>
            <div class="login-errorInfo">{{errorInfo}}</div>
        </el-form-item>
    </el-form>
</div>

</body>

<script type="text/javascript">

    String.prototype.startWith = function (str) {
        var reg = new RegExp("^" + str);
        return reg.test(this);
    }

    String.prototype.endWith = function (str) {
        var reg = new RegExp(str + "$");
        return reg.test(this);
    }


    var login = new Vue({
        el: '.login-box',
        data: function () {
            return {
                captchaUrl: '',
                errorInfo: '',
                ruleForm: {
                    username: '',
                    password: '',
                    verifyCode: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请填写账号', trigger: 'blur'},
                        {max: 30, message: '账号不能超过30 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请填写密码', trigger: 'blur'},
                        {max: 30, message: '密码不能超过30 个字符', trigger: 'blur'}
                    ],
                    verifyCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                        {max: 10, message: '验证码不能超过10个字符', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            captchaRefresh: function () {
                this.captchaUrl = 'captcha?t=' + new Date().getTime();
                var verifyCode = this.$refs.verifyCode;
                verifyCode.focus();
            },
            login: function () {
                var _this = this;
                _this.$refs.ruleForm.validate(function (valid) {
                    if (valid) {
                        _this.doLogin();
                    }
                });
            },
            doLogin: function () {
                var _this = this;
                $.post('signIn', {
                    username: _this.ruleForm.username,
                    password: _this.ruleForm.password,
                    verifyCode: _this.ruleForm.verifyCode
                }, function (response) {
                    if (response.code == 200) {
                        var indexUrl;
                        var loginUrl = window.location.href;
                        while (loginUrl.endWith("#")) {
                            loginUrl = loginUrl.substring(0, length(loginUrl));
                        }

                        if (loginUrl.endWith("login.html") && loginUrl.indexOf("login.html") > 0) {
                            indexUrl = loginUrl.replace("login.html", "#/")
                        } else if (loginUrl.endWith("login_page")) {
                            indexUrl = loginUrl.replace("login_page", "#/")
                        } else {
                            indexUrl = loginUrl.replace("login.html", "")
                        }
                        window.location.href = indexUrl;
                    }
                    if (response.code == 401) {
                        _this.errorInfo = response.msg
                        _this.$refs.ruleForm.resetFields();
                        _this.captchaRefresh();
                    }
                })
            }
        },
        created: function () {
            this.captchaRefresh();
        }
    });
</script>


</html>